<page-header-wrapper title="货物名称配置">
</page-header-wrapper>

<nz-card>
    <div class="d-flex">
        <div style="width: 250px;">
            <nz-list nzBordered [nzHeader]="listHeader">
                <nz-list-item *ngFor="let item of typeList;let i = index"
                    [ngClass]="{'select-type': selectedType.id===item.id}" (click)="selectedTypeAction(item)">
                    <div class="d-flex justify-content-between align-items-center" style="width: 100%;">
                        <label style="flex:1">{{item.name}}</label>
                        <i nz-icon nzType="more" nzTheme="outline" style="font-size: 18px;cursor: pointer;" nz-dropdown
                            [nzDropdownMenu]="menu" nzTrigger="click"></i>
                    </div>
                    <nz-dropdown-menu #menu="nzDropdownMenu">
                        <ul nz-menu nzSelectable>
                            <li nz-menu-item (click)="typeAction(item)" acl
                                [acl-ability]="['SYSTEM-GOODS-NAME-CONFIG-edit']">编辑</li>
                            <li nz-menu-item (click)="sortType(item,3)" acl
                                [acl-ability]="['SYSTEM-GOODS-NAME-CONFIG-sort']" *ngIf="i!==0">上移</li>
                            <li nz-menu-item (click)="sortType(item,4)" acl
                                [acl-ability]="['SYSTEM-GOODS-NAME-CONFIG-sort']" *ngIf="i!==typeList.length-1">下移</li>
                            <li nz-menu-item nzDanger acl [acl-ability]="['SYSTEM-GOODS-NAME-CONFIG-delete']"
                                (click)="removeType(item)">删除</li>
                        </ul>
                    </nz-dropdown-menu>
                </nz-list-item>
            </nz-list>
            <ng-template #listHeader>
                <div class="d-flex justify-content-between align-items-center">
                    <label style="font-weight: 700;font-size: 16px;">货物类型</label>
                    <button nz-button nzType="primary" (click)="typeAction()" acl
                        [acl-ability]="['SYSTEM-GOODS-NAME-CONFIG-add']"><i nz-icon nzType="plus"
                            nzTheme="outline"></i>新增</button>
                </div>
            </ng-template>
        </div>

        <div style="flex: 1;" class="ml-md">
            <div class="d-flex justify-content-between align-items-center mb-md">
                <nz-input-group [nzSuffix]="suffixTemplateInfo" style="width: 300px;">
                    <input type="text" nz-input placeholder="请输入货物名称" [(ngModel)]="searchName"
                        (keydown)="keydownEvent($event)" />
                </nz-input-group>
                <ng-template #suffixTemplateInfo><i nz-icon nzType="search" nzTheme="outline" (click)="st.load(1)"></i>
                </ng-template>
                <button nz-button nzType="primary" (click)="typeItemAction()" acl
                    [acl-ability]="['SYSTEM-GOODS-NAME-CONFIG-add']"><i nz-icon nzType="plus"
                        nzTheme="outline"></i>新增</button>
            </div>

            <st #st [data]="selectedType?.id?service.$api_get_config_item_page:[]" [columns]="columns"
                [req]="{  process: beforeReq }" [loading]="false" [scroll]="{ y: '370px' }"></st>
        </div>
    </div>

</nz-card>


<ng-template #configTypeModal>
    <div nz-row nzGutter="8">
        <div nz-col nzSpan="24" se-container [labelWidth]="110">
            <se [col]="1" label="货物类型" required="">
                <input nz-input [(ngModel)]="configTypeName" placeholder="请输入" />
            </se>
        </div>
    </div>
</ng-template>

<ng-template #configTypeItemModal>
    <div nz-row nzGutter="8">
        <div nz-col nzSpan="24" se-container [labelWidth]="110">
            <se [col]="1" label="货物类型" required="">
                {{selectedType?.name}}
            </se>
            <se [col]="1" label="货物名称" required="">
                <input nz-input [(ngModel)]="configTypeItemName" placeholder="请输入" />
            </se>
        </div>
    </div>
</ng-template>